<template>
  <div class="login-dontainer">
    <div class="login-background" />
    <div class="login-card">
      <el-card shadow="always">
        <div class="login-container-inner">
          <div class="cover">
            <img :src="requireImg('login-cover.svg')" alt="login-cover" />
          </div>
          <div class="login-form">
            <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules">
              <el-form-item>
                <h3 class="form-title">学员登陆</h3>
              </el-form-item>
              <el-form-item prop="username" class="mt20 mb20" title="用户名">
                <el-input
                  v-model="loginForm.username"
                  type="text"
                  size="large"
                  auto-complete="off"
                  placeholder="账号"
                >
                </el-input>
              </el-form-item>
              <el-form-item prop="password" class="mt20 mb20" title="密码">
                <el-input
                  v-model="loginForm.password"
                  type="password"
                  size="large"
                  auto-complete="off"
                  placeholder="密码"
                  @keyup.enter="handleLogin"
                >

                </el-input>
              </el-form-item>
              <el-form-item prop="code" class="mt20 mb20">
                <el-input
                  v-model="loginForm.code"
                  size="large"
                  auto-complete="off"
                  placeholder="验证码"
                  style="width: 63%"
                  @keyup.enter="handleLogin"
                >

                </el-input>
                <div class="login-code">
                  <el-image :src="codeUrl" @click="getCode" class="login-code-img" />
                </div>
              </el-form-item>
              <el-form-item class="mt20 mb20 btn-login-container">
                <el-button type="primary" size="large"   @click.prevent="handleLogin">登陆</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue'
import { requireImg } from '@/utils/ruoyi.js'
import { getCodeImg } from '@/api/login.js'
import { useRoute, useRouter } from 'vue-router'
import useUserStore from '@/store/modules/user.js'
const userStore = useUserStore();
const loginFormRef = ref()
const codeUrl = ref()
const loading = ref(false)
const route = useRoute()
const router = useRouter()
const redirect = ref(undefined)
const loginRules = {
  username: [{ required: true, trigger: 'blur', message: '请输入您的账号' }],
  password: [{ required: true, trigger: 'blur', message: '请输入您的密码' }],
  code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
}
const loginForm = reactive({
  username: '',
  password: '',
  uuid: '',
  code: ''
})

onMounted(() => {
  getCode()
})

function handleLogin() {
  loginFormRef.value.validate(valid => {
    if (valid) {
      loading.value = true
      // 调用action的登录方法
      userStore.login(loginForm).then(() => {
        const query = route.query
        const otherQueryParams = Object.keys(query).reduce((acc, cur) => {
          if (cur !== 'redirect') {
            acc[cur] = query[cur]
          }
          return acc
        }, {})
        console.log(otherQueryParams)
        router.push({ path: redirect.value || '/', query: otherQueryParams })
      }).catch(() => {
        loading.value = false
        // 重新获取验证码
        getCode()
      })
    }
  })
}

function getCode() {
  getCodeImg().then(res => {
    codeUrl.value = 'data:image/gif;base64,' + res.img
    loginForm.uuid = res.uuid;
  })
}

</script>

<style scoped lang="scss">
.login-dontainer {
  width: 100vw;
  height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  .login-background {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background: var(--el-color-primary) !important;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    transform: translateY(-30vh);
  }

  .login-card {
    position: absolute;
    width: 50%;

    :deep(.el-card) {
      border-radius: 30px;
      box-shadow: 0 16px 24px #0000001a;
    }

    .login-container-inner {
      display: grid;
      grid-gap: 2em;
      grid-template-columns: 1fr 1fr;

      .cover img {
        width: 100%;
      }


      .form-title {
        font-weight: bold;
        font-size: 2em;
        position: relative;


      }

      .form-title:after {
        content: "";
        position: absolute;
        background-color: var(--el-color-primary) !important;
        width: 100%;
        height: 4px;
        left: 0;
        bottom: -4px;
      }
    }
  }
}

.btn-login-container :deep(.el-form-item__content) {
  justify-content: center;
}

.login-code {
  width: 33%;
  height: 40px;
  float: right;

  img {
    cursor: pointer;
    vertical-align: middle;
  }
}

.login-code-img {
  height: 40px;
  padding-left: 12px;
}
</style>